<!-- 添加标点 -->
<template>
	<view class="content">
		<view class="wrapperBox">
			<view id="wrapper"></view>
		</view>
	</view>
</template>

<script>
	import axios from 'axios';
	import service from '../../utils/request.js';
	let mapObj = null; // 生成地图实例
	// ------------------------------ 更新内容1 ----------------------------- //
	// 创建多个标点
	let agriculture = []; // 生成图标实例1
	let property = []; // 生成图标实例2
	let construction = []; // 生成图标实例3
	let noRented = []; // 生成图标实例4
	let marker = []; // 生成标点实例
	// ---------------------------------------------------------------------- //

	window.mapInit = function() { // 挂载地图实例
		mapObj = new TMap.Map("wrapper", {
			center: new TMap.LatLng(24.623911, 118.087898), // 地图初始坐标
			zoom: 14, // 缩放等级
			mapStyleId: 'style1', // 地图样式
			zoomControl: false, // 设置是否启用缩放控件
		});

		mapObj.on("click", function(evt) { // 地图全局事件
			mapObj.setCenter(new TMap.LatLng(evt.latLng.getLat().toFixed(6), evt.latLng.getLng().toFixed(6)))
		})
	}

	export default {
		
		data() {
			return {
				key: '3RHBZ-QCJK3-HOW3Z-OIWEL-O2BUS-CUBFO',
				// ------------------------------ 更新内容2 ----------------------------- //
				iconItem: [{ // 模拟数据
					name: 'agriculture', // 样式类型

					position: [24.623911, 118.087898], // 标点中心坐标

				}, {
					name: 'property',

					position: [24.623911, 118.100000],

				}, {
					name: 'construction',

					position: [24.623911, 118.387898],

				}, {
					name: 'noRented',

					position: [24.623911, 118.587898],

				}]
				// ---------------------------------------------------------------------- //
			}
		},
		onLoad() {
			this.getAllSellersData();
			// #ifdef H5
			this.loadScrpit();
			// #endif

			// ------------------------------ 更新内容3 ----------------------------- //
			let time = setInterval(() => { // 等待地图挂载
				if (mapObj != null) {
					clearInterval(time);
					this.setIcon(); // 挂载坐标图片信息
				}
			}, 100)
			// ---------------------------------------------------------------------- //
			
		},
		methods: {
			async getAllSellersData() {
			  try {
			    const response = await service.get('/seller/listAll');
			    const sellers = response.data; // 假设返回的数据是一个商家数组
			
			    // 处理数据，创建iconItems数组
			    const iconItems = sellers.map(seller => {
			      return {
			        name: 'agriculture', // 这里可以根据需要设置不同的样式类型
			        position: [parseFloat(seller.latitude), parseFloat(seller.longitude)] // 转换经纬度为数字类型
			      };
			    });
			
			    // 将iconItems赋值给组件的data属性或其他需要的地方
			    this.iconItems = iconItems;
			    console.log('转换后的iconItems:', this.iconItems);
			  } catch (error) {
			    console.error('获取数据失败:', error);
			  }
			},
			// 初始化
			loadScrpit() { // 挂载js
				var script = document.createElement('script');
				script.src =
					`https://map.qq.com/api/gljs?v=1.exp&key=${this.key}&libraries=visualization&callback=mapInit`;
				document.body.appendChild(script);
			},
			// ------------------------------ 更新内容4 ----------------------------- //
			setIcon() { // 创建标点图标
				let that = this;
				// 创建 AMap.Icon 实例
				agriculture = new TMap.MarkerStyle({
					"width": 75, // 定义宽，单位：PX
					"height": 90, // 定义高，单位：PX
					"src": that.iconItem[0].markerUrl, // 标点图片链接：本地图片
				})
				property = new TMap.MarkerStyle({
					"width": 75,
					"height": 90,
					"src": that.iconItem[1].markerUrl,
				})
				construction = new TMap.MarkerStyle({
					"width": 75,
					"height": 90,
					"src": that.iconItem[2].markerUrl,
				})
				noRented = new TMap.MarkerStyle({
					"width": 75,
					"height": 90,
					"src": that.iconItem[3].markerUrl,
				})
				this.setMapMarker(); // 调用创建标点
			},
			setMapMarker() { // 创建标点实例
				let geometries = [];

				for (let i = 0; i < this.iconItem.length; i++) {
					let obj = { // 点标记数据
						"id": i, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
						"styleId": this.iconItem[i].name, // 对应标点实例的style的名称
						"position": new TMap.LatLng(this.iconItem[i].position[0], this.iconItem[i].position[
						1]), // 标点的坐标
						"properties": { // 自定义属性
							"title": this.iconItem[i].name
						}
					}
					geometries.push(obj);
				}

				marker = new TMap.MultiMarker({ // 构造函数创建标点实例
					id: 'marker-layer', // 定义的ID名称
					map: mapObj, // 挂载的地图实例
					styles: { // 加入标点的样式
						"agriculture": agriculture,
						"property": property,
						"construction": construction,
						"noRented": noRented,
					},
					geometries: geometries // 点标记数据数组
				});
			},
			// ---------------------------------------------------------------------- //
		}
	}
</script>

<style>
	.content {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.wrapperBox {
		position: relative;
		width: 100vw;
		height: 100vh;
		z-index: 1;
	}

	#wrapper {
		z-index: 20;
		width: 120vw;
		height: 120vh;
		top: -10vh;
		left: -10vw;
		position: absolute;
	}
</style>